@extends('app')

@section('content')
    <div class="layui-card" style="margin-bottom: 0;">

        @include('layouts.breadcrumb')

        <div class="layui-tab layui-tab-card" lay-filter="docDemoTabBrief" style="margin: 10px">
            <div class="layui-tab-content">
                <form class="layui-form">
                    <blockquote class="layui-elem-quote quoteBox" >
                        <a class="layui-btn layui-btn-sm" onclick="newWindow('新增分类','/cates/edit','500','500');">添加分类</a>
                        <a class="layui-btn layui-btn-sm" id="sort" >保存排序</a>
                    </blockquote>
                </form>
                <div class="layui-tab-item layui-show">
                    <table class="layui-table layui-form " id="model"></table>
                    <div id="tree"></div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/html" id="upload">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm layui-btn-primary" onclick="openAll()" lay-event="assign">全部展开/隐藏</button>
        </div>
    </script>
@endsection

@section('import')
    <script src="{{asset('asset/lib/extend/Sortable.js')}}"></script>
@endsection

@section('js')
    <script>

        layui.config({
            base: '/asset/' //静态资源所在路径
        }).extend({
            index: 'lib/index', //主入口模块
            treeTable:'lib/extend/treeTable'
        }).use(['treeTable','form','jquery','element'],function(){

            var $ = layui.$,
                form = layui.form,
                layer = layui.layer,
                element = layui.element,
                treeTable = layui.treeTable;

            $.ajax({
                url: '/cates/index',
                type: 'post',
                success:function(data){
                    var	re = treeTable.render({
                        elem: '#model',
                        data:data.data,
                        icon_key: 'name',
                        is_checkbox: true,
                        //默认选中
                        checked: {
                            key: 'id',
                        },
                        icon: {
                            open: 'layui-icon layui-icon-down',
                            close: 'layui-icon layui-icon-right',
                            left: 16,
                        },
                        end: function(e){
                            // console.dir(e);
                            form.render();
                        },
                        cols: [
                            {key: 'icon',title: '图标',width: '25px',template:function(item){
                                    if(item.icon!==null){
                                        return '<img src="'+item.icon+'" width="20px" height="20px"></img>';
                                    }else{
                                        return '';
                                    }
                                }
                            },
                            {key: 'name',title: '名称',width: '250px'},
                            {key:'sort', edit:'text',width:'50px', title: '排序'},
                            {key: 'id',title: 'ID',width: '100px',align: 'center',},
                            {key: 'pid',title: '上级ID',width: '100px',align: 'center',},
                            {key: 'created_at',title: '创建时间',width: '180px',align: 'center',template:function(item){return dateTime(item.created_at);}},
                            {key: 'updated_at',title: '更新时间',width: '180px',align: 'center',template:function(item){return dateTime(item.updated_at);}},
                            {title: '操作',align: 'center',template: function(item){
                                    var html='';
                                    var addBtn='<a class="layui-btn layui-btn-xs" lay-filter="add" lay-event="add">添加子菜单</a>';
                                    var editBtn='<a class="layui-btn layui-btn-normal layui-btn-xs" lay-filter="edit" lay-event="edit">编辑菜单</a>'
                                    var delBtn='<a class="layui-btn layui-btn-danger layui-btn-xs" lay-filter="del" lay-event="del">删除</a>';
                                    return addBtn+editBtn+delBtn;
                                }
                            }
                        ]
                    });

                    $("tbody").attr("id", 'foo');
                    Sortable.create(document.getElementById('foo'),{
                        animation: 150
                    });
                }
            });

            //添加子菜单
            treeTable.on('tree(add)',function(data){
                newWindow('添加子分类','/cates/edit?pid='+data.item.id,500,500);
            })

            //修改菜单
            treeTable.on('tree(edit)',function (data) {
                newWindow('编辑分类','/cates/edit?id='+data.item.id,500,500);
            });
            treeTable.on('tree(del)',function (data) {
                del(data)
            });

            function del(data) {
                console.info(data);
                layer.confirm("你确定删除数据吗？如果存在下级导航则一并删除，此操作不能撤销！", {icon: 3, title:'提示'},
                    function(index){//确定回调
                        var id = data.item.id;
                        $.ajax({
                            url:'/cates/del',
                            data:{id:id},
                            success:function(data){
                                layer.alert(data.msg,{icon: 1},function () {
                                    location.reload('treeTable');
                                    parent.layer.closeAll();
                                });
                            }
                        })
                    },function (index) {//取消回调
                        layer.close(index);
                    }
                );
            }

            $("#sort").click(function(){
                var obj = $('#model').find('tbody tr');
                var data = new Array();
                obj.each(function(index){
                    var i = $(this).index();
                    var id = Number($(this).attr('data-id'));
                    var pid = Number($(this).attr('data-pid'));
                    var arr = new Object();
                    arr.id = id;

                    arr.sort = i;
                    data.push(arr);
                })

                $.ajax({
                    url:'/cates/sort',
                    type:'post',
                    dataType:'json',
                    data:{'data':JSON.stringify(data)},
                    success:function(data){
                        layer.alert(data.msg,{icon: 1},function () {
                            location.reload('treeTable');
                            parent.layer.closeAll();
                        });
                    }
                })
            });
        })

    </script>
@endsection